<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import gameService from '../services/gameService';
import type { GameRoom, User, Message } from '../types';

const router = useRouter();
const route = useRoute();
const roomId = computed(() => route.params.id as string);

// 房间状态
const room = ref<GameRoom | null>(null);
const loading = ref(true);
const error = ref('');
const isHost = ref(false);
const currentUser = ref<User>({
  id: 'current_user',
  username: 'current_user',
  nickname: '当前用户',
  avatar: 'https://via.placeholder.com/40'
});

// 游戏状态
const gameStarted = ref(false);
const gamePhase = ref<'intro' | 'question' | 'answer'>('intro');
const currentRound = ref(1);
const maxRounds = ref(10);
const countdown = ref(0);

// 消息相关
const messages = ref<Message[]>([]);
const newMessage = ref('');
const messageInputDisabled = ref(false);

// 投票相关
const votingEnabled = ref(false);
const currentVoteTarget = ref('');
const votes = ref<Record<string, number>>({});
const userVotes = ref<Record<string, string>>({}); // userId -> targetUserId

// 计时器
let countdownTimer: number | null = null;

// 获取房间信息
const fetchRoomInfo = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    // 模拟获取房间信息
    room.value = {
      id: roomId.value,
      name: '海龟汤游戏房间',
      owner: {
        id: 'host1',
        username: 'host1',
        nickname: '主持人',
        avatar: 'https://via.placeholder.com/40'
      },
      players: [
        {
          id: 'host1',
          username: 'host1',
          nickname: '主持人',
          avatar: 'https://via.placeholder.com/40'
        },
        {
          id: 'current_user',
          username: 'current_user',
          nickname: '当前用户',
          avatar: 'https://via.placeholder.com/40'
        },
        {
          id: 'player1',
          username: 'player1',
          nickname: '玩家1',
          avatar: 'https://via.placeholder.com/40'
        },
        {
          id: 'player2',
          username: 'player2',
          nickname: '玩家2',
          avatar: 'https://via.placeholder.com/40'
        }
      ],
      maxPlayers: 6,
      status: 'waiting',
      password: '',
      currentSoup: {
        id: 'soup1',
        title: '神秘的敲门声',
        difficulty: 'medium',
        content: '一个人独自在家，突然听到敲门声...',
        answer: '敲门的是送快递的，而这个人实际上是个聋子，所以他听不到敲门声，但他通过其他方式感知到了有人在敲门。'
      },
      createdAt: new Date(),
      gameStatus: 'waiting'
    };
    
    // 检查是否是房主
    isHost.value = room.value.owner.id === currentUser.value.id;
    
    // 初始化消息
    initializeMessages();
  } catch (err: any) {
    error.value = err.message || '获取房间信息失败';
  } finally {
    loading.value = false;
  }
};

// 初始化消息
const initializeMessages = () => {
  messages.value = [
    {
      id: '1',
      roomId: roomId.value,
      userId: 'system',
      username: '系统',
      content: `欢迎来到房间 "${room?.value?.name}"！`,
      type: 'system',
      createdAt: new Date()
    },
    {
      id: '2',
      roomId: roomId.value,
      userId: 'system',
      username: '系统',
      content: '等待房主开始游戏...',
      type: 'system',
      createdAt: new Date()
    }
  ];
};

// 开始游戏
const startGame = async () => {
  if (!room.value) return;
  
  try {
    // 模拟开始游戏
    gameStarted.value = true;
    room.value.status = 'playing';
    room.value.gameStatus = 'playing';
    
    // 添加系统消息
    addSystemMessage('游戏开始！海龟汤题目已公布。');
    
    // 显示汤面
    if (room.value.currentSoup) {
      addSystemMessage(`汤面：${room.value.currentSoup.content}`);
    }
    
    // 切换到提问阶段
    gamePhase.value = 'question';
    messageInputDisabled.value = false;
    
    // 开始倒计时
    startCountdown(300); // 5分钟
  } catch (err: any) {
    console.error('开始游戏失败:', err);
    addSystemMessage(`错误：${err.message || '开始游戏失败'}`);
  }
};

// 发送消息
const sendMessage = async () => {
  if (!newMessage.value.trim() || messageInputDisabled.value || !room.value) {
    return;
  }
  
  const content = newMessage.value.trim();
  newMessage.value = '';
  
  try {
    // 添加用户消息
    const userMessage: Message = {
      id: Date.now().toString(),
      roomId: roomId.value,
      userId: currentUser.value.id,
      username: currentUser.value.nickname,
      content,
      type: 'user',
      createdAt: new Date()
    };
    messages.value.push(userMessage);
    
    // 模拟AI回答
    messageInputDisabled.value = true;
    
    // 模拟思考延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 生成AI回答
    const aiResponse = generateAIResponse(content);
    const aiMessage: Message = {
      id: (Date.now() + 1).toString(),
      roomId: roomId.value,
      userId: 'ai',
      username: 'AI助手',
      content: aiResponse,
      type: 'ai',
      createdAt: new Date()
    };
    messages.value.push(aiMessage);
    
    // 检查是否需要进入下一轮或结束游戏
    checkGameProgress();
    
  } catch (err: any) {
    console.error('发送消息失败:', err);
    addSystemMessage(`错误：${err.message || '发送消息失败'}`);
  } finally {
    messageInputDisabled.value = false;
    // 滚动到底部
    setTimeout(() => {
      const chatContainer = document.getElementById('chat-messages');
      if (chatContainer) {
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
    }, 100);
  }
};

// 生成AI回答
const generateAIResponse = (question: string): string => {
  // 简单的关键词匹配回答逻辑
  const lowerQuestion = question.toLowerCase();
  
  if (lowerQuestion.includes('是') || lowerQuestion.includes('对吗') || 
      lowerQuestion.includes('吗？') || lowerQuestion.includes('吗？')) {
    // 随机回答是或否
    const random = Math.random();
    if (random < 0.6) {
      return '是';
    } else {
      return '否';
    }
  } else if (lowerQuestion.includes('为什么') || lowerQuestion.includes('原因')) {
    return '这个问题需要你自己推理。';
  } else if (lowerQuestion.includes('提示') || lowerQuestion.includes('help')) {
    return '提示：想想这个故事中可能被忽略的细节。';
  } else if (lowerQuestion.includes('汤底') || lowerQuestion.includes('答案')) {
    return '游戏还未结束，请继续提问。';
  }
  
  // 其他问题的通用回答
  const responses = [
    '这个问题的答案与故事有关。',
    '你需要更仔细地思考。',
    '这个方向很有趣，但还不完全正确。',
    '继续沿着这个思路提问。',
    '这个问题的答案是肯定的。',
    '这个问题的答案是否定的。'
  ];
  
  return responses[Math.floor(Math.random() * responses.length)];
};

// 检查游戏进度
const checkGameProgress = () => {
  currentRound.value++;
  
  if (currentRound.value >= maxRounds.value) {
    endGame();
  } else if (currentRound.value % 3 === 0) {
    // 每3轮提供一个提示
    addSystemMessage('提示：请关注故事中的时间和地点。');
  }
};

// 结束游戏
const endGame = async () => {
  try {
    gamePhase.value = 'answer';
    messageInputDisabled.value = true;
    room.value!.status = 'finished';
    room.value!.gameStatus = 'finished';
    
    // 停止倒计时
    if (countdownTimer) {
      clearInterval(countdownTimer);
      countdownTimer = null;
    }
    
    // 显示汤底
    addSystemMessage('游戏结束！');
    addSystemMessage(`汤底：${room?.value?.currentSoup?.answer}`);
    addSystemMessage('感谢参与游戏！');
  } catch (err: any) {
    console.error('结束游戏失败:', err);
    addSystemMessage(`错误：${err.message || '结束游戏失败'}`);
  }
};

// 开始倒计时
const startCountdown = (seconds: number) => {
  countdown.value = seconds;
  
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
  
  countdownTimer = setInterval(() => {
    countdown.value--;
    
    if (countdown.value <= 0) {
      clearInterval(countdownTimer);
      countdownTimer = null;
      
      if (gameStarted.value && gamePhase.value !== 'answer') {
        addSystemMessage('时间到！游戏结束。');
        endGame();
      }
    } else if (countdown.value <= 60 && countdown.value % 30 === 0) {
      addSystemMessage(`警告：游戏将在 ${countdown.value} 秒后结束！`);
    }
  }, 1000) as unknown as number;
};

// 添加系统消息
const addSystemMessage = (content: string) => {
  const systemMessage: Message = {
    id: Date.now().toString(),
    roomId: roomId.value,
    userId: 'system',
    username: '系统',
    content,
    type: 'system',
    createdAt: new Date()
  };
  messages.value.push(systemMessage);
  
  // 滚动到底部
  setTimeout(() => {
    const chatContainer = document.getElementById('chat-messages');
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  }, 100);
};

// 离开房间
const leaveRoom = async () => {
  try {
    // 停止倒计时
    if (countdownTimer) {
      clearInterval(countdownTimer);
      countdownTimer = null;
    }
    
    // 实际项目中调用API
    // await gameService.leaveGameRoom(roomId.value);
    
    // 跳转回房间列表
    router.push('/rooms');
  } catch (err: any) {
    console.error('离开房间失败:', err);
    alert('离开房间失败: ' + (err.message || '未知错误'));
  }
};

// 踢出玩家
const kickPlayer = async (playerId: string) => {
  if (!isHost.value || !room.value) return;
  
  try {
    // 模拟踢出玩家
    const player = room.value.players.find(p => p.id === playerId);
    if (player) {
      room.value.players = room.value.players.filter(p => p.id !== playerId);
      addSystemMessage(`${player.nickname} 已被房主踢出房间。`);
    }
  } catch (err: any) {
    console.error('踢出玩家失败:', err);
    addSystemMessage(`错误：${err.message || '踢出玩家失败'}`);
  }
};

// 格式化时间
const formatTime = (seconds: number): string => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 格式化消息时间
const formatMessageTime = (date: Date): string => {
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 组件挂载时获取数据
onMounted(() => {
  fetchRoomInfo();
});

// 组件卸载时清理
watch(() => route.params.id, (newId, oldId) => {
  if (newId !== oldId) {
    if (countdownTimer) {
      clearInterval(countdownTimer);
      countdownTimer = null;
    }
    fetchRoomInfo();
  }
});
</script>

<template>
  <div class="room-page">
    <div class="room-container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载房间信息中...</p>
      </div>
      
      <!-- 错误状态 -->
      <div v-else-if="error" class="error-container">
        <p>{{ error }}</p>
        <button class="btn-primary" @click="fetchRoomInfo">重试</button>
        <button class="btn-outline" @click="router.push('/rooms')">返回房间列表</button>
      </div>
      
      <!-- 房间内容 -->
      <div v-else-if="room" class="room-content">
        <!-- 房间头部 -->
        <div class="room-header">
          <div class="room-info">
            <h1 class="room-name">{{ room.name }}</h1>
            <div class="room-meta">
              <span class="room-status" :class="room.status">
                {{ room.status === 'waiting' ? '等待中' : 
                   room.status === 'playing' ? '游戏中' : '已结束' }}
              </span>
              <span class="player-count">{{ room.players.length }}/{{ room.maxPlayers }} 玩家</span>
              <span v-if="countdown > 0" class="countdown">时间: {{ formatTime(countdown) }}</span>
              <span class="round-info" v-if="gameStarted">第 {{ currentRound }}/{{ maxRounds }} 轮</span>
            </div>
          </div>
          
          <div class="room-actions">
            <button 
              v-if="isHost && !gameStarted"
              class="btn-primary start-game-btn"
              @click="startGame"
              :disabled="room.players.length < 2"
            >
              开始游戏
            </button>
            <button class="btn-outline" @click="leaveRoom">
              离开房间
            </button>
          </div>
        </div>
        
        <!-- 房间主体 -->
        <div class="room-main">
          <!-- 聊天区域 -->
          <div class="chat-section">
            <div class="chat-header">
              <h2>聊天区域</h2>
              <span v-if="gamePhase === 'intro'" class="phase-indicator">游戏介绍</span>
              <span v-else-if="gamePhase === 'question'" class="phase-indicator">提问阶段</span>
              <span v-else-if="gamePhase === 'answer'" class="phase-indicator">答案揭晓</span>
            </div>
            
            <div id="chat-messages" class="chat-messages">
              <div 
                v-for="message in messages" 
                :key="message.id"
                class="message"
                :class="message.type"
              >
                <div class="message-header">
                  <span class="message-username">{{ message.username }}</span>
                  <span class="message-time">{{ formatMessageTime(message.createdAt) }}</span>
                </div>
                <div class="message-content">{{ message.content }}</div>
              </div>
            </div>
            
            <div class="chat-input-container">
              <input
                v-model="newMessage"
                type="text"
                placeholder="输入问题或消息..."
                class="chat-input"
                @keyup.enter="sendMessage"
                :disabled="messageInputDisabled || !gameStarted || gamePhase !== 'question'"
              />
              <button 
                class="btn-primary send-btn"
                @click="sendMessage"
                :disabled="!newMessage.trim() || messageInputDisabled || !gameStarted || gamePhase !== 'question'"
              >
                发送
              </button>
            </div>
          </div>
          
          <!-- 玩家列表 -->
          <div class="players-section">
            <div class="players-header">
              <h2>玩家列表</h2>
            </div>
            
            <div class="players-list">
              <div 
                v-for="player in room.players" 
                :key="player.id"
                class="player-item"
                :class="{ 'host': player.id === room.owner.id, 'current-user': player.id === currentUser.id }"
              >
                <div class="player-info">
                  <img :src="player.avatar" :alt="player.nickname" class="player-avatar" />
                  <div class="player-details">
                    <div class="player-name">
                      {{ player.nickname }}
                      <span v-if="player.id === room.owner.id" class="host-badge">房主</span>
                      <span v-else-if="player.id === currentUser.id" class="you-badge">你</span>
                    </div>
                    <div class="player-status">
                      {{ gameStarted && gamePhase === 'question' ? '在线' : '等待中' }}
                    </div>
                  </div>
                </div>
                
                <div class="player-actions">
                  <button 
                    v-if="isHost && player.id !== room.owner.id"
                    class="kick-btn"
                    @click="kickPlayer(player.id)"
                    :disabled="gameStarted"
                  >
                    踢出
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 海龟汤信息 -->
            <div class="soup-info">
              <div class="soup-header">
                <h2>海龟汤信息</h2>
              </div>
              <div class="soup-content">
                <h3 class="soup-title">{{ room.currentSoup?.title }}</h3>
                <div class="soup-difficulty" :class="room.currentSoup?.difficulty">
                  {{ room.currentSoup?.difficulty === 'easy' ? '简单' : 
                     room.currentSoup?.difficulty === 'medium' ? '中等' : '困难' }}
                </div>
                
                <div v-if="gamePhase === 'intro'" class="soup-description">
                  <p>游戏即将开始，请做好准备！</p>
                </div>
                
                <div v-else-if="gamePhase === 'question'" class="soup-description">
                  <p class="soup-surface">{{ room.currentSoup?.content }}</p>
                  <p class="game-tips">
                    💡 提示：你可以提问Yes/No问题来获取线索，尝试还原整个故事！
                  </p>
                </div>
                
                <div v-else-if="gamePhase === 'answer'" class="soup-description">
                  <h4>汤底揭晓：</h4>
                  <p class="soup-answer">{{ room.currentSoup?.answer }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.room-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.room-container {
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 40px);
}

/* 加载和错误状态 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-container p {
  color: #dc2626;
  margin-bottom: 20px;
  text-align: center;
}

.error-container button {
  margin: 0 8px;
}

/* 房间内容 */
.room-content {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

/* 房间头部 */
.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-bottom: 1px solid #e5e7eb;
}

.room-name {
  font-size: 24px;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.room-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.room-status {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
}

.room-status.waiting {
  background: rgba(16, 185, 129, 0.2);
}

.room-status.playing {
  background: rgba(245, 158, 11, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.room-status.finished {
  background: rgba(156, 163, 175, 0.2);
}

.player-count,
.countdown,
.round-info {
  font-size: 14px;
  opacity: 0.9;
}

.countdown {
  font-weight: 600;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

.room-actions {
  display: flex;
  gap: 12px;
}

.start-game-btn {
  min-width: 120px;
}

/* 房间主体 */
.room-main {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

/* 聊天区域 */
.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.chat-header h2 {
  margin: 0;
  font-size: 18px;
  color: #374151;
}

.phase-indicator {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 80%;
  word-wrap: break-word;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.user {
  align-self: flex-end;
  background: #3b82f6;
  color: white;
}

.message.ai {
  align-self: flex-start;
  background: #10b981;
  color: white;
}

.message.system {
  align-self: center;
  background: #6b7280;
  color: white;
  max-width: 90%;
  text-align: center;
  font-style: italic;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  opacity: 0.8;
}

.message-content {
  font-size: 15px;
  line-height: 1.4;
}

.chat-input-container {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #e5e7eb;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.chat-input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.send-btn {
  min-width: 80px;
}

/* 玩家列表 */
.players-section {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.players-header,
.soup-header {
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 8px 8px 0 0;
}

.players-header h2,
.soup-header h2 {
  margin: 0;
  font-size: 16px;
  color: #374151;
}

.players-list {
  background: white;
  border-radius: 0 0 8px 8px;
  border: 1px solid #e5e7eb;
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.player-item:hover {
  background: #f9fafb;
}

.player-item.host {
  background: #eff6ff;
}

.player-item.current-user {
  background: #f0fdf4;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
}

.player-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-name {
  font-weight: 500;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
}

.host-badge,
.you-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.host-badge {
  background: #3b82f6;
  color: white;
}

.you-badge {
  background: #10b981;
  color: white;
}

.player-status {
  font-size: 12px;
  color: #6b7280;
}

.player-actions {
  display: flex;
  gap: 8px;
}

.kick-btn {
  padding: 4px 8px;
  font-size: 12px;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kick-btn:hover:not(:disabled) {
  background: #fecaca;
}

.kick-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 海龟汤信息 */
.soup-info {
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex: 1;
}

.soup-content {
  padding: 16px;
}

.soup-title {
  font-size: 18px;
  margin: 0 0 12px 0;
  color: #111827;
}

.soup-difficulty {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}

.soup-difficulty.easy {
  background: #dcfce7;
  color: #166534;
}

.soup-difficulty.medium {
  background: #fef3c7;
  color: #92400e;
}

.soup-difficulty.hard {
  background: #fee2e2;
  color: #991b1b;
}

.soup-description {
  line-height: 1.6;
  color: #374151;
}

.soup-surface {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  padding: 12px;
  background: #f9fafb;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}

.game-tips {
  font-size: 14px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 12px;
  border-radius: 4px;
}

.soup-answer {
  font-size: 16px;
  line-height: 1.6;
  color: #111827;
  padding: 16px;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #dcfce7;
}

/* 按钮样式 */
.btn-primary {
  padding: 10px 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-outline {
  padding: 10px 20px;
  background: white;
  color: #4b5563;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f9fafb;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .room-main {
    flex-direction: column;
  }
  
  .players-section {
    width: 100%;
    flex-direction: row;
  }
  
  .players-list {
    flex: 1;
    max-height: 200px;
  }
  
  .soup-info {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .room-page {
    padding: 10px;
  }
  
  .room-header {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    text-align: center;
  }
  
  .room-meta {
    justify-content: center;
  }
  
  .room-main {
    padding: 16px 10px;
  }
  
  .players-section {
    flex-direction: column;
  }
  
  .message {
    max-width: 90%;
  }
  
  .chat-input-container {
    flex-direction: column;
  }
  
  .send-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .room-name {
    font-size: 20px;
  }
  
  .room-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .chat-messages {
    padding: 12px;
  }
  
  .player-item {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .player-actions {
    justify-content: flex-end;
  }
}
</style>